<!--
 * @Author: wwssaabb
 * @Date: 2021-09-09 09:58:34
 * @LastEditTime: 2021-09-09 11:26:25
 * @FilePath: \gshop-client\src\views\Search.vue
-->
<template>
  <div class="navbar">
    <NavBar title="搜索"></NavBar>
  </div>
  <div class="search">
    <div class="search-input">
      <Search
        v-model="search"
        placeholder="请输入商家名称"
        shape="round"
      ></Search>
      <Button type="primary" color="#02a774">提交</Button>
    </div>
  </div>
  <div class="tabbar">
    <Tabbar :active="1"></Tabbar>
  </div>
</template>

<script setup lang="ts">
import NavBar from "../components/Navbar.vue";
import Tabbar from "../components/Tabbar.vue";
import { ref } from "vue";
import { Search, Button } from "vant";

//搜索框的值
const search = ref("");
</script>

<style lang="scss" scoped>
.search-input {
  padding: 5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  .van-search {
    width: 100%;
  }
  button {
    width: 15vw;
    padding: 0;
    height: 30px;
  }
}
</style>
